<!--
 * @Project:
 * @Remark:
 * @Author: shaoyuan
 * @Date: 2023-02-23 16:38:24
 * @LastEditors: chenxuan
 * @LastEditTime: 2023-09-15 16:25:03
 * @FilePath: \arb-front\src\views\login.vue
-->
<template>
    <div class="zdjx-login">
        <div class="content">
            <div class="loginLeft"></div>
            <div class="loginRight">
                <div class="loginRight-logo"></div>
                <div class="loginRight-title">kibana</div>
                <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-position="top"
                    label-width="80px">
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="form.username" autocomplete="off" clearable type="text"
                            placeholder="请输入用户名"></el-input>
                        <span class="symbol"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#user"></use>
                            </svg></span>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="form.password" autocomplete="off" clearable show-password type="password"
                            placeholder="请输入密码"></el-input>
                        <span class="symbol"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#pswd"></use>
                            </svg></span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" id="submit" @click="submit('ruleForm')" :loading="loading">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import http from '@/axiosConfig/http'
import {msg_error} from '@/assets/js/common.js'
export default {
    name: 'login',
    data() {
        var validaUsername = (rule, value, callback) => {
            if (!value) {
                return callback(this.$t("login.errorMsg.userName"));
            } else {
                callback();
            }
        }
        var validaPswd = (rule, value, callback) => {
            if (!value) {
                return callback(new Error(this.$t("login.errorMsg.pswd")));
            } else {
                callback();
            }
        }
        return {
            form: {
                username: "nacos", //admin  devops  gientech_test
                password: "nacos"
            },
            loading: false,
            rules: {
                loginName: [{ validator: validaUsername, trigger: "blur" }],
                pword: [{ validator: validaPswd, trigger: "blur" }]
            }
        }
    },
    mounted: function () {
        sessionStorage.clear();
        let that = this;
        if (!this.loading) {
            document.onkeydown = function (e) {
                if (e.keyCode == "13") {
                    that.submit("ruleForm");
                }
            }
        }
    },
    methods: {
        submit(rule) {
            this.$refs[rule].validate((valid) => {
                if (valid) {
                    this.loading = true
                    // sessionStorage.setItem('username',this.form.username)
                    // sessionStorage.setItem('token',this.form.username)
                    // this.$router.push('/')
                    // let formDatas =new FormData()
                    // formDatas.append('username',this.form.username)
                    // formDatas.append('password',this.form.password)
                    // http.post_cluster('/login',{...this.form})
                    // .then((res)=>{
                    //     this.loading = false
                    //     if(res.status=='000000'){
                            // sessionStorage.setItem('username',this.form.username)
                            sessionStorage.setItem('username',this.form.username)
                            sessionStorage.setItem('token',this.form.username)
                            this.$router.push('/')
                    //     }
                    //     else{
                    //         msg_error(res.message)
                    //     }
                    // })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.tenant-input .el-select {
    width: 100%;
}

.zdjx-login {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    padding-top: 64px;
    background: #fff url(../assets/img/bg_login1.jpg) center no-repeat;
    background-size:100% 100%;
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        box-shadow: 0px 2px 12px 0px rgba(29,112,245,0.31);
    }
    .content .loginLeft {
        width: 50%;
        height: 100%;
        // background-color: #fff;
        background: #1b48cb url(../assets/img/bg_login_left_.png) center no-repeat;
        background-size: 100% 100%;
    }

    .content .loginRight {
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        background-color: #fff;
        .loginRight-logo{
            background: url(../assets/img/bg_login_logo.png) center no-repeat;
            background-size: 100% 100%;
        }
        .loginRight-title{
            font-size: 20px;
            color: #222222;
            text-align: center;
            font-weight: 400;
        }
        /deep/.el-form{
            margin: 0 auto;
            width: 320px;
        }
    }

    .content .loginRight .el-form-item {
        position: relative;
    }

    .content .loginRight .el-form-item .symbol {
        position: absolute;
        top: 3px;
        left: 6px;
        color: #969696;
        font-size: 26px;
    }

    .content .loginRight/deep/.el-form--label-top .el-form-item__label {
        padding: 0;
        color: #333;
        font-size: 16px;
    }

    .content .loginRight/deep/input {
        height: 46px;
        text-indent: 30px;
        border: 1px solid #DCDEE2;
        border-radius: 4px;
        font-size: 18px;
    }
    .content .loginRight .el-form-item .el-button--primary {
        width: 100%;
        height: 46px;
        margin: 12px 0 24px;
        font-size: 18px;
        font-weight: bold;
        background: #1D70F5;;
        border-radius: 4px;
    }
}
@media screen and (max-width: 1025px) {
     .content {
        width: 870px;
        height: 408px;
        border-radius: 8px;
    }
    .loginRight-logo{
            width: 232px;
            height: 42px;
            margin: 20px auto  12px auto;
    }
    .loginRight-title{
        margin-bottom: 24px;
    }
}
@media screen and (max-width: 1367px) and (min-width: 1025px) {
    .content {
        width: 1040px;
        height: 480px;
        border-radius: 8px;
    }
    .loginRight-logo{
            width: 232px;
            height: 42px;
            margin: 48px auto  16px auto;
    }
    .loginRight-title{
        margin-bottom: 36px;
    }
}

@media screen and (max-width: 99999px) and (min-width: 1367px) {
    .content {
        width: 1300px;
        height: 600px;
        border-radius: 12px;
    }
    .loginRight-logo{
        width: 328px;
        height: 52px;
        margin: 90px auto  16px auto;
    }
    .loginRight-title{
        margin-bottom: 50px;
    }
}
</style>
